<template>
    <div class="productlabel-box">
        <el-dialog
            :title="
                is_dom == 1
                    ? datatype == 1
                        ? '产品标签'
                        : '服务标签'
                    : datatype == 1
                    ? '产品有效期'
                    : '服务有效期'
            "
            :visible.sync="is_dialog"
            width="400px"
            top="11vh"
        >
            <div class="dialog-box">
                <div class="productlabel-many">
                    <div class="many-left">
                        <div class="title">
                            <span>{{ is_dom == 1 ? "标签" : "有效期" }}</span>
                        </div>
                        <div class="explain">
                            <span
                                >开启后产品可以添加{{
                                    is_dom == 1 ? "标签" : "有效期"
                                }}</span
                            >
                        </div>
                    </div>
                    <div class="many-right">
                        <el-switch
                            v-model="is_switch"
                            active-color="#3388ff"
                            inactive-color="#dcdfe6"
                            active-value="1"
                            inactive-value="2"
                            @change="setConfigureSwitch"
                        >
                        </el-switch>
                    </div>
                </div>
                <div class="list-box comm-list" v-show="is_switch == 1">
                    <div
                        class="list-row"
                        v-for="item in list_data"
                        :key="item.id"
                        @click="setStateFun(item)"
                    >
                        <div class="list-left">
                            <el-checkbox
                                v-model="item.status"
                                false-label="2"
                                true-label="1"
                                >{{ item.title }}</el-checkbox
                            >
                        </div>
                        <div class="list-right">
                            <el-button
                                type="primary"
                                icon="el-icon-edit"
                                circle
                                @click.stop="
                                    is_dom == 1
                                        ? setModifychildCat('2', item)
                                        : setoUtdayFun(item)
                                "
                            ></el-button
                            ><el-button
                                type="danger"
                                icon="el-icon-delete"
                                circle
                                @click.stop="setDelCatFun(item)"
                            ></el-button>
                        </div>
                    </div>
                </div>
                <div class="add-box" v-show="is_switch == 1">
                    <el-button
                        @click="
                            is_dom == 1
                                ? setModifychildCat('1')
                                : setoUtdayFun({})
                        "
                        >添加{{ is_dom == 1 ? "标签" : "有效期" }}</el-button
                    >
                </div>
            </div>
        </el-dialog>
        <el-dialog
            :title="this.outday_from.id > 0 ? '编辑有效期' : '新建有效期'"
            :visible.sync="is_save_dialog"
            width="420px"
            top="35vh"
        >
            <div class="from-bxo">
                <el-form ref="form" :model="outday_from" :rules="rules">
                    <el-form-item
                        ><el-input
                            class="outday-input"
                            v-model="outday_from.num"
                            :placeholder="`请输入过期${
                                outday_from.unit === 'd' ? '天' : '月'
                            }数`"
                        ></el-input>
                        <el-select
                            class="outday-select"
                            v-model="outday_from.unit"
                        >
                            <el-option label="天" value="d"></el-option>
                            <el-option
                                label="月"
                                value="m"
                            ></el-option> </el-select
                    ></el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button size="mini" @click="is_save_dialog = false"
                    >取 消</el-button
                >
                <el-button
                    size="mini"
                    type="primary"
                    @click="setOutdayFormFun"
                    :loading="is_but"
                    >确 定</el-button
                >
            </span>
        </el-dialog>
    </div>
</template>

<script>
import config from "@/js/conf/Config.js";
import LocalStore from "@/js/LocalStore.js";

export default {
    name: "productlabel",
    props: ["datatype"],
    data() {
        return {
            is_dialog: false,
            is_save_dialog: false,
            is_but: false,
            is_switch: "2",
            checkedCities: [],
            list_data: [],
            cpInfo: LocalStore.getCpInfo,
            is_dom: "1",
            ls_api_url: "",
            save_api_url: "",
            savels_api_url: "",
            del_api_url: "",
            outday_from: {
                id: 0,
                num: "d",
                unit: "",
                status: "1",
            },
            rules: {
                num: [
                    {
                        pattern: /^[0-9]*$/,
                        message: "格式错误",
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    created() {},
    methods: {
        initData(type) {
            this.is_dom = type;
            this.list_data = [];
            if (type == 1) {
                if (this.datatype == 1) {
                    this.ls_api_url = config.GDPRE_TAG_LS;
                    this.savels_api_url = config.GDPRE_TAGLS_SAVE;
                    this.save_api_url = config.GDPRE_TAG_SAVE;
                    this.del_api_url = config.GDPRE_TAG_DEL;
                } else {
                    this.ls_api_url = config.PROPRE_TAG_LS;
                    this.savels_api_url = config.PROPRE_TAG_SAVE;
                    this.save_api_url = config.PROPRE_TAG_SAVE;
                    this.del_api_url = config.PROPRE_TAG_DEL;
                }
            } else {
                if (this.datatype == 1) {
                    //商城暂无有效期
                } else {
                    this.ls_api_url = config.PROPRE_OUTDAY_LS;
                    this.savels_api_url = config.PROPRE_OUTDAY_SAVE;
                    this.save_api_url = config.PROPRE_OUTDAY_SAVE;
                    this.del_api_url = config.PROPRE_OUTDAY_DEL;
                }
            }
            this.getListFun();
        },

        setConfigureSwitch(val) {
            const data = {
                key: this.is_dom == 1 ? "tag" : "outday",
                is_updata: true,
            };
            this.$emit("setConfigureSwitch", data, val);
        },
        async getListFun(type = null) {
            let url = this.ls_api_url;
            let param = {};
            let res = await this.$api({ url: url, data: param });
            if (
                res.status == 1 &&
                res.data.tag_ls &&
                res.data.tag_ls.tag_ls &&
                res.data.tag_ls.tag_ls.length > 0
            ) {
                this.list_data = res.data.tag_ls.tag_ls;
            } else if (res.data.tag_ls && res.data.tag_ls.length > 0) {
                this.list_data = res.data.tag_ls;
            } else if (res.data.outday_ls && res.data.outday_ls.length > 0) {
                this.list_data = res.data.outday_ls;
            }
            if (type) {
                this.$msg({
                    title: type == 1 ? "添加成功" : "编辑成功",
                });
            }
        },
        async setStateFun(item) {
            item.status = item.status == 1 ? "2" : "1";
            let url = this.savels_api_url;
            let param = {};
            if (this.is_dom == 1) {
                if (this.datatype == 1) {
                    let idsarr = [];
                    this.list_data.map((v) => {
                        if (v.status == 1) {
                            idsarr.push(v.id);
                        }
                    });
                    param = {
                        idls: idsarr.join(","),
                        cpid: this.cpInfo.id,
                    };
                } else {
                    param = {
                        id: item.id,
                        title: item.title,
                        fid: "0",
                        cpid: this.cpInfo.id,
                        status: item.status,
                    };
                }
            } else {
                param = {
                    id: item.id,
                    unit: item.unit,
                    num: item.num,
                    status: item.status,
                };
            }
            let res = await this.$api({ url: url, data: param });
            if (res.status != 1) {
                item.status = item.status == 1 ? "2" : "1";
            }
        },
        // 新增/编辑有效期弹框
        setoUtdayFun(item = {}) {
            this.outday_from = {
                id: item.id || "0",
                num: item.num || "",
                unit: item.unit || "d",
                status: item.status || "1",
            };
            this.is_save_dialog = true;
        },
        // 提交新增/编辑有效期弹框
        async setOutdayFormFun() {
            let url = this.save_api_url;
            let param = this.outday_from;
            this.is_but = true;
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1) {
                this.is_but = false;
                this.is_save_dialog = false;
                let type = param.id == 0 ? "1" : "2";
                this.getListFun(type);
            } else {
                this.is_but = false;
            }
        },
        // 新增/编辑标签
        setModifychildCat(type, data = null) {
            this.$prompt(
                "请输入标签名称",
                `${type == 1 ? "添加标签" : "编辑标签"}`,
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    inputPattern: /^.+$/,
                    inputErrorMessage: "请输入标签名称",
                    inputValue: type == 1 ? "" : data.title,
                }
            )
                .then(async ({ value }) => {
                    let url = this.save_api_url;
                    let param = {
                        id: type == 1 ? "0" : data.id,
                        title: value,
                    };
                    let res = await this.$api({ url: url, data: param });
                    if (res.status == 1) {
                        this.getListFun(type);
                    }
                })
                .catch(() => {});
        },
        setDelCatFun(item) {
            this.$confirm("确定删除该标签吗?", "删除标签", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(async () => {
                    let url = this.del_api_url;
                    let param = {
                        id: item.id,
                    };
                    let res = await this.$api({ url: url, data: param });
                    if (res.status == 1) {
                        this.$msg({ title: "删除成功" });
                        this.list_data.map((v, i) => {
                            if (v.id == item.id) {
                                this.list_data.splice(i, 1);
                            }
                        });
                    }
                })
                .catch(() => {});
        },
    },
};
</script>

<style lang="scss" scoped>
.productlabel-box {
    .from-bxo {
        ::v-deep.outday-input {
            width: 310px;
            .el-input__inner {
                border-radius: 4px 0 0 4px;
            }
        }
        ::v-deep.outday-select {
            width: 70px;
            .el-input__inner {
                border-radius: 0 4px 4px 0;
                background-color: #dcdfe6;
            }
            .el-input__suffix-inner {
                .el-select__caret {
                    color: #353638 !important;
                }
            }
        }
    }
    .dialog-box {
        .productlabel-many {
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-radius: 5px;
            border: 1px #efdede solid;
            padding: 5px 10px;

            .many-left {
                font-size: 12px;
                .title {
                    font-size: 14px;
                }
                .explain {
                    color: #9d9d9d;
                }
            }
        }
        .list-box {
            height: 500px;
            overflow: auto;
            margin-top: 10px;
            .list-row {
                display: flex;
                align-items: center;
                justify-content: space-between;
                height: 50px;
                border-bottom: 1px #f7f7f7 solid;
                padding: 5px 10px;
                cursor: pointer;
                &:hover {
                    background: #f7f7f7;
                }
                ::v-deep.list-left {
                    .el-checkbox {
                        max-width: 200px;
                        display: block;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        pointer-events: none;
                    }
                }
                ::v-deep.list-right {
                    .el-button {
                        padding: 5px;
                        font-size: 12px;
                    }
                }
            }
        }
        ::v-deep.add-box {
            margin-top: 10px;
            .el-button {
                width: 100%;
                color: #459ffd;
                border-color: #459ffd;
            }
        }
    }
}
</style>